import { tooltipLength } from '@/utils';
import { Button, Popconfirm, Tooltip } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { Fragment } from 'react';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { DelegateManageAPI } from '../common/type';

/** 表格功能操作 */
const getManageFunctions = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: DelegateManageAPI.IOperationClick,
  /** 数据操作对象 */
  record: Record<string, any>,
) => {
  /** 功能操作集 */
  let operationList: any = [];

  /** 字体样式 */
  let textStyle: React.CSSProperties = {
    fontSize: '.75rem',
  };

  /**
   * 编辑
   */
  const Edit = (
    // !!curRes['/activitiController/modelEdit'] &&
    <Fragment key={record?.id + 'EditOutlined'}>
      <Button
        style={textStyle}
        onClick={() => {
          operateFnc?.onEdit(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
      >
        编辑
      </Button>
    </Fragment>
  );

  /**
   * 删除
   */
  const Delete = (
    // !!curRes['/announceController/addCheck'] &&
    <Fragment key={record?.id + 'DeleteOutlined'}>
      <Popconfirm
        title={<span style={{ fontWeight: 600 }}>确认要删除该委托吗？</span>}
        onConfirm={(e) => {
          e?.stopPropagation();
          operateFnc?.onDelete(record);
        }}
        showCancel={false}
        okType={'default'}
      >
        <Button
          style={textStyle}
          type={'link'}
          size={'small'}
          icon={<DeleteOutlined />}
        >
          删除
        </Button>
      </Popconfirm>
    </Fragment>
  );

  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button
        style={{ color: '#000' }}
        className='manageBtntTxtStyle'
        type={'link'}
        size={'small'}
        disabled
      >
        --
      </Button>
    </Fragment>
  );

  operationList = [Edit, Delete];
  operationList = operationList?.filter((itemBtn: any) => itemBtn);
  return operationList && operationList?.length > 0 ? operationList : [Disable];
};

/**
 * 表格信息 展示和操作
 * @returns
 */
const getTableColumns = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: DelegateManageAPI.IOperationClick,
) => {
  return [
    {
      title: '委托部门',
      dataIndex: 'wtbumen',
      key: 'wtbumen',
      width: 180,
      visible: true,
      sorter: (a: any, b: any) => (a.wtbumen > b.wtbumen ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 170 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '委托岗位',
      dataIndex: 'wtgangwei',
      key: 'wtgangwei',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.wtgangwei > b.wtgangwei ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 140 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '委托人',
      dataIndex: 'wtren',
      key: 'wtren',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.wtren > b.wtren ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 110 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '被委托部门',
      dataIndex: 'bwtbumen',
      key: 'bwtbumen',
      width: 180,
      visible: true,
      sorter: (a: any, b: any) => (a.bwtbumen > b.bwtbumen ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 170 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '被委托岗位',
      dataIndex: 'bwtgangwei',
      key: 'bwtgangwei',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.bwtgangwei > b.bwtgangwei ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 140 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '被委托人',
      dataIndex: 'bwtren',
      key: 'bwtren',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.bwtren > b.bwtren ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 110 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      width: 100,
      visible: true,
      sorter: (a: any, b: any) => a.state - b.state,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '禁用';
          textColor = '#ff3700';
        } else if (text == '1') {
          newText = '启用';
          textColor = '#42c900';
        }
        return (
          <span style={{ color: textColor }}>{newText ? newText : '--'}</span>
        );
      },
    },
    {
      title: '委托时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: 180,
      visible: true,
      sorter: (a: any, b: any) => (a.startTime > b.startTime ? 1 : -1),
      render: (text: string, record: Record<string, any>) => {
        let newText: string = '';
        if (record?.startTime || record?.endTime) {
          newText = `${
            record?.startTime ? record?.startTime?.split(' ')?.[0] : '--'
          } ~ ${record?.endTime ? record?.endTime?.split(' ')?.[0] : '--'}`;
        }
        return (
          <Tooltip>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 170 }}
            >
              {newText ? newText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '委托原因',
      dataIndex: 'wtyuanyin',
      key: 'wtyuanyin',
      width: 250,
      visible: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 240 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
      visible: false,
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 140 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 140,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (text: any, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {getManageFunctions(curRes, operateFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getTableColumns };
